<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Customizing templates</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.fx.js"></script>
        <script src="../../source/js/nova.calendar.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Customizing templates</div>
        <!-- description -->
        <div id="example" class="n-content">
            <div class="configuration">
                <span class="infoHead">Information</span>
                <p>
                    Apply special style for the birthdays.
                </p>
            </div>

            <div id="calendar" style="width: 300px;"></div>

            <script>
                $(document).ready(function() {
                    var birthdays = [
                       +new Date(2011, 11, 11),
                       +new Date(2011, 10, 6),
                       +new Date(2011, 10, 27),
                       +new Date(2011, 3, 3),
                       +new Date(2011, 9, 22)
                    ];

                    $("#calendar").novaCalendar({
                        value: "10/10/2011",
                        month: {
                            // template for dates in month view
                            content: '# if ($.inArray(+data.date, [' + birthdays + ']) != -1) { #' +
                                         '<div class="birthday"></div>' +
                                     '# } #' +
                                     '#= data.value #'
                        },
                        footer: "Today - #=nova.toString(data, 'd') #"
                    });
                });
            </script>

            <style scoped>
                #calendar {
                    margin-top: 2em;
                }

                .birthday {
                    background: transparent url(../content/calendar/cake.png) no-repeat 0 50%;
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;
                    margin-right: 3px;
                }
            </style>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
